<template>
  <div class="model-container">
    <el-table
      v-loading="!tableData"
      ref="tableData"
      :stripe="true"
      :data="tableData"
      border
      empty-text="暂无数据">

      <el-table-column align="center" prop="name" label="商品图片"/>

      <el-table-column align="center" prop="itemTitle" label="商品名称"/>

      <el-table-column align="center" prop="marketPrice" label="价格(元)"/>

      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">

          <el-button :disabled="disableIinput" title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click.native.prevent="deleteRow(scope.$index, tableData)"/>

        </template>
      </el-table-column>

    </el-table>

    <!--表格-->
    <el-card v-if="type !== 3" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button :disabled="disableIinput" type="primary" plain @click="add">新增</el-button>
        </div>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" style="float: right;width: 200px"/>
      </div>
      <div class="table-wrapper">
        <el-table
          v-loading="!dataOption"
          :stripe="true"
          :data="dataOption.filter(data => !search || data.itemTitle.toLowerCase().includes(search.toLowerCase()))"
          border
          empty-text="暂无数据"
          @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" prop="name" label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.defaultPicUrl" width="50px" height="50px">
            </template>
          </el-table-column>

          <el-table-column align="center" prop="sellerItemNo" label="商品编号"/>

          <el-table-column align="center" prop="itemTitle" label="商品名称"/>

          <el-table-column align="center" prop="brandName" label="商品品牌"/>

          <el-table-column align="center" prop="sellerItemNo" label="商品属性组"/>

          <el-table-column align="center" prop="marketPrice" label="市场价(元)"/>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as commodity from '../../../api/commodity'
export default {
  /* eslint-disable vue/require-prop-types */
  props: ['type', 'editorData'],
  data() {
    return {
      // 输入禁用
      disableIinput: false,
      search: '',
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 表格1
      dataval: '',
      tableData: [],
      // 列表数据
      dataOption: []
    }
  },
  beforeMount() {
    this.getList()
    if (this.type !== 1) {
      this.getgoodList(this.editorData.itemId)
    }
    if (this.type === 3) {
      this.disableIinput = true
    }
  },
  methods: {
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        isDeleted: 0,
        itemType: 0
      }
      commodity.getCommodityList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    getgoodList(data) {
      const param = {
        current: 1,
        size: 3000,
        itemId: data
      }
      commodity.getGoodList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.tableData = res.data.data.records
      })
    },
    // 新增
    add() {
      var result = []
      var obj = {}
      if (this.dataval.length > 0) {
        for (var i = 0; i < this.dataval.length; i++) {
          if (!obj[this.dataval[i].itemId]) {
            result.push(this.dataval[i])
            obj[this.dataval[i].itemId] = true
          }
        }
        this.tableData = result
      } else {
        this.$message({
          message: '请选择商品',
          type: 'warning'
        })
      }
    },
    changeFun(data) {
      this.dataval = data
      console.log(this.dataval)
    },
    // 删除
    del(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    incrementTotal() {
      const goodIdData = []
      for (const val of this.tableData) {
        goodIdData.push(val.itemId)
      }
      this.$emit('submitassociatedgoods', goodIdData)
    },
    // 删除当前行
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
</style>
